<template>
    <div class="SpecialIndex">
        <!-- 头部 -->
		<Header :navActive="1" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
            <!-- 背景图 -->
            <div class="banner"><img :src="info.imageFileId_dictText"></div>
            <!-- 导航 -->
            <div class="nav">
                <router-link tag="div" :to="{name:'SpecialIndex',query:{id:this.id}}" class="item">活动介绍</router-link>
                <router-link tag="div" :to="{name:'SpecialIndexJob',query:{id:this.id}}" class="item">空中双选</router-link>
                <router-link v-show ="id =='1552832466132377601'" tag="div" :to="{name:'specialIndexLiveCommerce',query:{id:this.id}}" class="item">直播带岗</router-link>
            </div>
            <!-- 企业介绍 -->
            <div class="block block2">
                <div class="title"><span>直播带岗</span></div>
                <div class="w1200">
                    <div class="wrap">
                        <div class="box one">
                            <img src="https://res.huanghehr.com/public/user/2022/11/43f08e6caeeff5ad4fc8c9cf2e6f00bc.jpg"/>
                            <br/>
                                <el-button type="primary" class="bg_btn"  round>敬请期待</el-button>
                        </div>
                        <div class="box one">
                            <img src="https://res.huanghehr.com/public/user/2022/11/43f08e6caeeff5ad4fc8c9cf2e6f00bc.jpg"/>
                            <br/>
                                <el-button type="primary" class="bg_btn" round>敬请期待</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 企业视频 -->
            <!-- <div class="block block1" v-if="info.videoId_dictText">
                <div class="title"><span>专场视频</span></div>
                <div class="video">
                    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
                </div>
            </div> -->
            <!-- 招聘流程 -->
            <!-- <div class="block block3">
                <div class="title"><span>招聘流程</span></div>
                <div class="box w1200">
                    <img src="../../assets/specialCompanyLc.png" alt="">
                </div>
            </div> -->
		</div>
        <!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {specialDetail} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
	export default {
		//组件注入
		components: {Header,Footer,videoPlayer},
        //存放数据
        data() {
            return {
                id:'',
                info:{},
                banner:[],
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    poster: "", //你的封面地址
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                }
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {},
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.id = this.$route.query.id
            //专场详情
			specialDetail({
				'id': this.id
			}).then(res =>{
				if(res.code==200){
                    this.info = res.result
                    this.info.startTime = this.info.startTime.replace(/\-/g,".");
                    this.info.endTime = this.info.endTime.replace(/\-/g,".");
                    if(res.result.videoId_dictText){
                        this.playerOptions.sources[0] = res.result.videoId_dictText
                        this.banner = res.result.imageBaseInfoId_dictText.split(',')
                    }
				}
            });	
        },
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .SpecialIndex{background: #F6F6F6;
        .main{
            .bg_btn {
                margin: 5 auto 5 auto;
                font: 15pt bolder;
                 width: 300px; 
                 height: 50px; 
                 background: red; 
            } 

            .wrap{
                width: 100%;
                display: flex;
	        }
            .box.one{
                text-align:center ;
                width: 50%;
		        flex: 1;
	        }
            .banner{width: 100%;height: 500px;
                img{width: 100%;height: 100%;}
            }
            .nav{height: 60px;line-height: 60px;background: #fff;text-align: center;
                .item{display: inline-block;font-size: 18px;color: #666;padding: 0 50px;margin: 0 70px;cursor: pointer;position: relative;@include transition();
                    &:after{content: "";width: 0;height: 3px;background: #E54437;position: absolute;left: 0;bottom: 0;right: 0;margin: auto;@include transition()}
                    &.active,&:hover{color: #E54437;
                        &:after{width: 100%;}
					}
					&.active{font-weight: bold;}
                }
            }
            .block{height: auto;overflow: hidden;margin: 50px auto;
                .title{width: 760px;overflow: hidden;position: relative;margin: 0 auto 30px;
                    span{width: 200px;height: 50px;line-height: 50px;font-size: 24px;color: #fff;font-weight: bold;text-align: center;border-radius: 20px 0px 20px 0px;background: #E54437;display: block;margin: 0 auto;}
                    &:before{content: "";width: 250px;height: 4px;background: linear-gradient(90deg, rgba(255, 222, 219, 0) 0%, rgba(247, 177, 171, 0.29) 29%, #E54437 100%);position: absolute;left: 0;top: 25px;}
                    &:after{content: "";width: 250px;height: 4px;background: linear-gradient(270deg, rgba(255, 222, 219, 0) 0%, rgba(247, 177, 171, 0.29) 29%, #E54437 100%);position: absolute;right: 0;top: 25px;}
                }
                &.block1{
                    .video{width: 900px;height: 433px;overflow: hidden;border-radius: 10px;margin: 0 auto;
                        .video-js,.video-player{width: 100%;height: 100%;padding: 0;
                            video{width: 100%;height: 100%}
                            .vjs-big-play-button{width: 60px;height: 60px;line-height: 60px !important;left: 0;right: 0;top: 0;bottom: 0;margin: auto;border-radius: 50%;border:0;
                                &:hover{opacity: 1;}
                            }
                        }
                    }
                }
                &.block2{
                    .box{height: auto;overflow: hidden;margin: 0 auto;padding: 50px 30px;background: #fff;border-radius: 20px;
                        .text{width: 474px;height: 420px;overflow: hidden;
                            .t{font-size: 18px;color: #333;margin-bottom: 10px;font-weight: bold;}
                            .time{font-size: 16px;color: #555;margin-bottom: 10px;}
                            h2{font-size: 20px;color: #333;font-weight: bold;}
                            .dsc{font-size: 16px;color: #444;line-height: 30px;@include text-ellipsisclamp(14)}
                        }
                        .img{width: 629px;height: 420px;
                            img{width: 100%;height: 100%;}
                        }
                    }
                }
                &.block3{margin-bottom: 140px;}
            }
        }
    }
</style>